<template>
  <div class="box">
    <div class="header">我的主页</div>
    <div class="tou"></div>
    <div class="main">
      <van-cell title="地址" icon="shop-o" is-link to="/address" />
      <van-cell title="联系人" icon="shop-o" is-link to="/contact" />
      <van-cell title="修改密码" icon="shop-o" is-link to="/modify" />
      <van-cell title="退出登录" icon="shop-o" is-link @click="exit" />
      <van-cell title="设置" icon="shop-o" is-link to="/home" />

    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon, Cell, CellGroup } from 'vant';

Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup)
export default {
  data() {
    return {

    }
  },
  methods: {
    exit(){
      localStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.header {
  text-align: center;
  line-height: 0.64rem;
  font-size: .18rem;
}

.tou {
  height: 1rem;
  background-color: aliceblue;
  margin-bottom: 0.1rem;
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.van-cell van-cell--clickable {
  margin-top: 10px;
}
</style>